<template>
  <!-- 复选框列 -->
  <el-table-column
    type="selection"
    :prop="columnInfo.prop ? columnInfo.prop : ''"
    v-if="columnInfo.type == 'selection'"
    :align="columnInfo.align"
    :width="columnInfo.width"
    :min-width="columnInfo.minwidth"
    :fixed="columnInfo.fixed"
  >
  </el-table-column>

  <!-- 索引列。序号 -->
  <el-table-column
    type="index"
    v-else-if="columnInfo.type == 'index'"
    :align="columnInfo.align"
    :width="columnInfo.width"
    :min-width="columnInfo.minwidth"
    :fixed="columnInfo.fixed"
  >
  </el-table-column>

  <!-- icon表头 -->
  <el-table-column
    :prop="columnInfo.prop ? columnInfo.prop : ''"
    :label="columnInfo.label"
    :align="columnInfo.align"
    :sortable="columnInfo.sortable"
    :width="columnInfo.width"
    :min-width="columnInfo.minwidth"
    :fixed="columnInfo.fixed"
    :filters="columnInfo.filters"
    v-else-if="columnInfo.iconText"
  >
    <template slot-scope="scope">
      <!-- icon图标 -->
      <i :class="columnInfo.icon"></i>
      <span style="margin-left: 10px">{{ scope.row[columnInfo.prop] }}</span>
    </template>
  </el-table-column>

  <!-- popover表头 -->
  <el-table-column
    :prop="columnInfo.prop ? columnInfo.prop : ''"
    :sortable="columnInfo.sortable"
    :label="columnInfo.label"
    :align="columnInfo.align"
    :width="columnInfo.width"
    :min-width="columnInfo.minwidth"
    :filters="columnInfo.filters"
    v-else-if="columnInfo.popover"
  >
    <template slot-scope="scope">
      <!-- tag-popover标签 -->
      <el-popover
        trigger="hover"
        :placement="columnInfo.placement ? columnInfo.placement : 'top'"
      >
        <div v-html="columnInfo.html(scope.$index, scope.row)"></div>
        <div slot="reference" class="name-wrapper">
          <span
            v-if="columnInfo.title"
            v-html="columnInfo.title(scope.$index, scope.row)"
          ></span>
          <el-tag v-else size="medium">{{ scope.row[columnInfo.prop] }}</el-tag>
        </div>
      </el-popover>
    </template>
  </el-table-column>

  <!-- expand 展开行 显示表格数据 -->
  <el-table-column
    type="expand"
    :width="columnInfo.width ? columnInfo.width : ''"
    :sortable="columnInfo.sortable"
    :min-width="columnInfo.minwidth ? columnInfo.minwidth : ''"
    v-else-if="columnInfo.expandForm"
  >
    <template slot-scope="scope">
      <el-form label-position="left" inline class="demo-table-expand">
        <el-form-item
          v-for="(item, index) in columnInfo.expandform"
          :key="index"
          :label="item.label"
        >
          <span>{{ scope.row[item.prop] }}</span>
        </el-form-item>
      </el-form>
    </template>
  </el-table-column>

  <!-- 多级表头 -->
  <el-table-column
    :prop="columnInfo.prop ? columnInfo.prop : ''"
    :label="columnInfo.label"
    :align="columnInfo.align"
    :width="columnInfo.width"
    :min-width="columnInfo.minwidth"
    :fixed="columnInfo.fixed"
    :span-method="columnInfo.spanMethod"
    v-else-if="columnInfo.columConfigs"
  >
    <!-- 调用自身目录  递归-->
    <tableColumn
      :column="column"
      v-for="(column, index) in columnInfo.columConfigs"
      :key="index"
    >
    </tableColumn>
  </el-table-column>

  <!-- 操作列 其他标签列 -->
  <el-table-column
    v-else-if="!columnInfo.visible"
    :prop="columnInfo.prop ? columnInfo.prop : ''"
    :sortable="columnInfo.sortable"
    :label="columnInfo.label"
    :align="columnInfo.align"
    :width="columnInfo.width"
    :min-width="columnInfo.minwidth"
    :fixed="columnInfo.fixed"
  >
    <template slot-scope="scope">
      <span>
        <template
          v-if="
            columnInfo.listScopeTemplate ||
            createScopeMethod(columnInfo.createScopeTemplate, scope.row)
          "
        >
          <span
            v-for="(template, index) in Object.prototype.toString.call(
              columnInfo.createScopeTemplate
            ) === '[object Function]'
              ? columnInfo.createScopeTemplate(scope.row)
              : columnInfo.listScopeTemplate"
            :key="index"
            :class="template.class || 'listitem'"
          >
            <general
              v-if="template.hasOwnProperty('componentName')"
              v-bind="inheritProps(template, scope.row)"
              v-model="scope.row[columnInfo.prop]"
              :component-name="
                Object.prototype.toString.call(template.componentName) ==
                '[object Function]'
                  ? template.componentName(scope.row)
                  : template.componentName
              "
              v-on="inheritListeners(template, index, scope.row)"
            ></general>
          </span>
        </template>

        <template v-else>
          <div v-if="columnInfo.imageParams">
            <el-image
              @click.stop
              style="width: 60px; height: 60px"
              v-bind="columnInfo.imageParams(scope.row, scope.$index)"
            ></el-image>
          </div>
          <div v-else-if="columnInfo.render">
            <component
              :is="columnInfo.render(scope.row, scope.$index)"
            ></component>
          </div>
          <div
            v-else-if="columnInfo.html"
            v-html="columnInfo.html(scope.row, scope.$index)"
          ></div>

          <span v-else v-html="scope.row[columnInfo.prop]"></span>
        </template>
      </span>
    </template>
  </el-table-column>
</template>

<script>
import general from "@/components/general";

export default {
  components: {
    general: general,
  },
  name: "TableColumn",
  props: {
    column: {
      type: Object,
      required: true,
    },
  },
  computed: {
    columnInfo() {
      let myProps = this.$myProps.column || this.column || {};

      myProps.align = myProps.align || "left";
      myProps.width = myProps.width || "";
      myProps.minwidth = myProps.minwidth || "";
      myProps.visible = myProps.visible || false;
      if (myProps.listScopeTemplate) {
        myProps.listScopeTemplate.forEach((c) => {
          c.size = c.size || "mini";
        });
      }

      if (
        Object.prototype.toString.call(myProps.listScopeTemplate) ===
        "[object Function]"
      ) {
        myProps.listScopeTemplate = myProps.listScopeTemplate();
      }

      return myProps;
    },
    $myProps() {
      return this.$public.inheritProps(this);
    },
  },
  created() {},
  mounthed() {},
  methods: {
    createScopeMethod(method, row) {
      let isflag = false;
      if (Object.prototype.toString.call(method) == "[object Function]") {
        let data = method(row);
        if (data) {
          isflag = true;
        }
      }
      return isflag;
    },
    // 继承转换属性
    inheritProps(template, row) {
      let cloneTemplate = {};
      Object.assign(cloneTemplate, template);

      let componentName =
        Object.prototype.toString.call(cloneTemplate.componentName) ==
        "[object Function]"
          ? cloneTemplate.componentName(row)
          : cloneTemplate.componentName;

      switch (componentName.toKebabCase()) {
        case "button-input":
          cloneTemplate.noText =
            Object.prototype.toString.call(cloneTemplate.noText) ==
            "[object Boolean]"
              ? cloneTemplate.noText
              : true;
          delete cloneTemplate.visible;
          break;
      }

      delete cloneTemplate.componentName;
      delete cloneTemplate.visible;

      if (template.prop && row) {
        template.value = row[template.prop];
      }

      return cloneTemplate;
    },
    // 继承转换事件
    inheritListeners(template, index, row) {
      let listeners = this.$public.inheritListeners({
        $attrs: template,
        $listeners: {},
      });

      // let _self = this

      Object.keys(listeners).forEach((event) => {
        let tempAction = listeners[event];

        let origin = [];

        // 传递ID主键
        // if (
        //      Object.prototype.toString.call(property) !==
        //      '[object Undefined]'
        // ) {
        //      origin.push(_self.progressValue(row, property))
        // }

        origin.push(index);
        origin.push(row);

        listeners[event] = function () {
          tempAction.apply(null, origin.concat(Array.from(arguments)));
        };
      });

      return listeners;
    },

    // //点击事件
    // click(index, row) {
    //      this.$emit("_click", index, row)
    // },
    // //取消事件
    // cancel(index, row) {
    //      this.$emit("_cancel", index, row)
    // },
    // //确认事件
    // confirm(index, row) {
    //      this.$emit("_confirm", index, row)
    // },//改变事件
    // change(index, row, event) {
    //      this.$emit("_change", index, row)
    // }
  },
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>